<template>
	<view class="agentStaffContainer">
		<ly-tree
			:tree-data="agentList"
			:props="treeProps"
			node-key="uniKey"
			:defaultExpandAll="true"
			iconClass="cuIcon-titles text-blue"
			:need-extend2="pageType == 'agent'"
			@extendClick="extendClick"
			@extendClick2="unBindClick"
		></ly-tree>
		<view class="codeIconContainer flex align-center justify-center ">
			<view><text class="cuIcon-qrcode" style="font-size: 52rpx;" @click="openCodeModal"></text></view>
		</view>
		<qrcode-modal
			:visible="modalVisible"
			title="经销商小程序二维码"
			:name="imgName"
			save-dir="agentCode"
			:img-url="imgBase64Data"
			@confirm-click="modalConfirmClick"
		></qrcode-modal>
		<!-- <uni-pagination v-if="total > 10" :total="total" :pageSize="10" prev-text="上一页" next-text="下一页" @change="pageChange" /> -->
	</view>
</template>

<script>
import { mapActions } from 'vuex';
import QrcodeModal from './components/qrcode-modal/qrcode-modal.vue';
import store from '@/store/index.js';
export default {
	components: {
		QrcodeModal
	},
	data() {
		return {
			staffList: [],
			agentList: [],
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			total: 50,
			imgBase64Data: '',
			imgName: '',
			modalVisible: false,
			pageType: 'agent',
			treeProps: function() {
				return {
					label(data, node) {
						return `${node.data.Name}`;
					},
					extend(data, node) {
						return `${node.data.Tel}`;
					},
					extend2(data, node) {
						console.log(data, node);
						return node.parentId ? '解绑' : '';
					},
					extendClass(data, node) {
						return 'cuIcon-phone text-blue';
					},
					extendClass2(data, node) {
						return node.parentId ? 'padding-left-sm padding-right-sm text-red' : '';
					},
					children: 'teamList' // 指把数据中的‘childs’当做children当做子节点数据
				};
			}
		};
	},
	onLoad(obj) {
		if (obj && obj.type) {
			this.pageType = obj.type;
		}
	},
	onReady() {
		//#ifdef MP-WEIXIN
		this.imgName = `经销商小程序码${this.$store.state.user.userInfo.No}`;
		//#endif
		this.getMPCodeFormServer();
		this.getEmp();
	},
	methods: {
		...mapActions({
			getStaffList: 'agent/getStaffList',
			unBindStaff: 'agent/unBindStaff',
			getAgentCode: 'agent/getAgentCode',
			getEmpList: 'agent/getEmpList'
		}),
		listItemClick(item) {
			console.log(item);
			uni.navigateTo({
				url: `agentStaffDetail?id=${item.id}`
			});
		},
		scroll(e) {
			this.old.scrollTop = e.detail.scrollTop;
		},
		pageChange(obj) {
			console.log(obj.current);
			this.scrollTop = this.old.scrollTop;
			this.$nextTick(function() {
				this.scrollTop = 0;
			});
			uni.showLoading({
				mask: true,
				title: '请求中'
			});
		},
		openCodeModal() {
			this.modalVisible = true;
		},
		modalConfirmClick() {
			this.modalVisible = false;
		},
		getEmp() {
			this.getEmpList()
				.then(res => {
					console.log(res);
					if (res && res.code == '000000') {
						this.createEmpList(res.data, 0);
						console.log(res.data);
						this.agentList = res.data;
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		createEmpList(arr, deep) {
			arr.forEach((e, i) => {
				e.uniKey = `${deep}${i}_${e.No}`;
				if (e.teamList && e.teamList.length > 0) {
					this.createEmpList(e.teamList, deep + 1);
				}
			});
		},
		getMPCodeFormServer() {
			let self = this;
			this.getAgentCode({
				wxAppOpenId: this.$store.state.agent.agentInfo.No
			})
				.then(res => {
					console.log(res, self.saveUrl);
					if (res && res.code == '000000') {
						let base64Data = uni.arrayBufferToBase64(res.wxCode);
						this.imgBase64Data = base64Data;
					}
				})
				.catch(err => {
					console.log(err);
					uni.showModal({
						title: '提示',
						content: '获取代理商小程序码失败',
						showCancel: false,
						success(res) {
							if (res.confirm) {
							}
						}
					});
				});
		},
		unBindClick(item, index) {
			let self = this;
			uni.showModal({
				title: '解绑',
				content: '确定解除绑定？',
				success(res) {
					if (res.confirm) {
						self.unBindStaff({
							no: item.data.No,
							parentNo: self.$store.state.user.userInfo.No
						})
							.then(res => {
								if (res && res.code == '000000') {
									uni.showToast({
										title: '解绑成功'
									});
									// self.staffList.splice(index, 1);
									self.getEmp();
								} else {
									uni.showToast({
										title: '解绑失败',
										icon: 'none'
									});
								}
							})
							.catch(err => {
								console.log(err);
								uni.showToast({
									title: '解绑失败：网络错误',
									icon: 'none'
								});
							});
					}
				}
			});
		},
		extendClick(item) {
			wx.makePhoneCall({
				phoneNumber: item.data.Tel
			});
		}
	}
};
</script>

<style lang="less">
page {
	background-image: linear-gradient(#eee, white);
}
.agentStaffContainer {
	overflow: hidden;
	padding-bottom: 104rpx;
	.scrollView {
		// height: calc(100vh - (24rpx + 30px));
		/* #ifdef MP-WEIXIN */
		height: 100vh;
		/* #endif */
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
	}
	.codeIconContainer {
		position: fixed;
		bottom: 24rpx;
		right: 24rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		box-shadow: 0 0 4rpx 4rpx #eee;
		background-color: white;
	}
	.ly-tree {
		padding: 0;
		background: transparent;
	}
	.ly-tree-node__label {
		font-size: 32rpx;
	}
	.ly-tree-node__expand-icon {
		color: #f37b1d;
	}
	.ly-tree-node__content {
		background-color: white;
		padding-right: 12rpx;
		// border-bottom: 1rpx solid #eee;
	}
}
</style>
